import  { LitElement, html, css, classMap } from 'https://assets.kiipu.com/libs/lit/3.1.3/lit-all.min.js';
import 'https://assets.kiipu.com/libs/card-ui/0.0.8/all.min.js';
import { stylesString } from './styles.js';

export class KpArticle extends LitElement {
  static styles = [
    css([stylesString])
  ];

  static properties = {
    preview: { type: Boolean },
    dark: { type: Boolean },
    title: { type: String },
    url: { type: String },
    image: { type: String },
    description: { type: String },
    datePublished: { type: String, attribute: 'date-published' },
    author: { type: String, attribute: 'author' },
    authorUrl: { type: String, attribute: 'author-url' },
    avatar: { type: String, attribute: 'avatar' },
    theme: { type: Object }
  }

  constructor() {
    super();
    this.preview = false;
  }
  render() {
    const hasAvatar = !!this.avatar;
    const theme = this.theme || { link: 'primary' };

    const userElem = html`<div class="${classMap({ 'user-avatar': hasAvatar, 'user-no-avatar': !hasAvatar })}">
      <kpc-link class="author" color=${this.dark ? 'primary' : theme.link} href="${this.authorUrl}" ?preview="${this.preview}">${this.author}</kpc-link>
      <kpc-time variant="caption" color="secondary" datetime="${new Date(this.datePublished).getTime()}" class="${classMap({ 'name-no-avatar': !hasAvatar })}"></kpc-time>
    </div>`;

    return html`
      <div>
        <kpc-link class="title" href="${this.url}" ?preview="${this.preview}" variant="title" color="primary">${this.title}</kpc-link>
        ${hasAvatar
          ? html`<div class="user-avatar-wrap">
            ${this.avatar && html`<kpc-avatar src="${this.avatar}" href="${this.authorUrl}" ?preview="${this.preview}" class="avatar" />`}
            ${userElem}
          </div>` : userElem}
        ${this.image && html`<kpc-picture class="picture" src="${this.image}" href="${this.url}" ?preview="${this.preview}" />`}
        ${this.description && html`<kpc-typography>${this.description}</kpc-typography>`}
      </div>
    `;
  }
}

window.customElements.define('TAG_NAME', KpArticle);
